<style scoped>
@import "@/assets/table.css";
</style>
<template>
  <el-table
      :data="tableData"
      class="tableWH"
      @selection-change="handleSelectionChange"
      :header-cell-style="{background:'#eee',color:'#606266'}"
      @sort-change="sortChange"
  >
    <el-table-column
        type="selection"
        header-align="center"
        align="center"
    />

<!--    <el-table-column-->
<!--        label="客户编号"-->
<!--        prop="id"-->
<!--        header-align="center"-->
<!--        align="center"-->
<!--    >-->
<!--      <template #default="scope">-->
<!--        {{scope.$index+1+pageSize*(currentPage-1)}}-->
<!--      </template>-->
<!--    </el-table-column>-->

    <el-table-column
        label="收货单位"
        prop="receivingUnit"
        header-align="center"
        align="center"
    />

    <el-table-column
        label="商品名称"
        prop="goodName"
        header-align="center"
        align="center"
    />

    <el-table-column
        label="单位"
        prop="per"
        header-align="center"
        align="center"
    />

    <el-table-column
        prop="costPrice"
        label="单价"
        header-align="center"
        align="center"
    />

    <el-table-column
        label="备注"
        prop="remark"
        header-align="center"
        align="center"
    />

    <el-table-column
        label="操作"
        header-align="center"
        align="center"
    >
      <template #default="scope">
        <el-button
            size="small"
            @click="handleEdit(scope.row)"
        >
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row)"
        >删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div
      class="pagination"
  >
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="currentChange"
        v-model:current-page="currentPage"
    />
  </div>
  <el-dialog
      v-model="dialogFormVisibleUpdate"
      width="500"
      title="单价编辑"
  >
    <el-form
        :model="dialogFormData"
        label-width="auto"
    >

      <el-form-item label="收货单位:">
        <el-select
            v-model="dialogFormData.uid"
            filterable
            allow-create
        >
          <el-option
              v-for="item in getConsigneeList"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="商品名称:">
        <el-select
            v-model="dialogFormData.gid"
            filterable
            allow-create
        >
          <el-option
              v-for="item in getGoodsList"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="单位:">
        <el-select
            v-model="dialogFormData.per"
            filterable
            allow-create
        >
          <el-option
              v-for="item in perList"
              :label="item"
              :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="单价:">
        <el-input
            v-model="dialogFormData.costPrice"
        />
      </el-form-item>

      <el-form-item label="备注:">
        <el-input
            v-model="dialogFormData.remark"
        />
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
            @click="dialogFormVisibleUpdate = false"
        >
          取消
        </el-button>
        <el-button
            type="primary"
            @click="updateUnivalence"
        >
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
      v-model="dialogFormVisibleDelete"
      title="单价删除"
      width="500"
  >
    <span>确定删除吗？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button
            @click="dialogFormVisibleDelete = false"
        >
          取消
        </el-button>
        <el-button
            type="primary"
            @click="deleteUnivalence"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {ElTable, ElMessage} from 'element-plus'
import {
  lookUnivalenceAPI,
  updateUnivalenceAPI,
  deleteUnivalenceAPI,
  getConsigneeAPI,
  getGoodsAPI
} from "@/axios/api";

const multipleSelection = ref([])//全选
const tableData = ref([])//存放请求数据
const pageSize = ref(10)//页数
const currentPage = ref(1)//页码
const total = ref(0)//总条数
const sort = ref(0)//正逆顺序
const dialogFormVisibleUpdate = ref(false)//编辑
const dialogFormVisibleDelete = ref(false)//删除
const dialogFormData = ref()//编辑操作中间值
const handleDeleteIndex = ref(0)//删除操作中间值
const getConsigneeList=ref([])
const getGoodsList=ref([])
const perList=ref(["斤","千克","升"])
function getConsignee(){
  getConsigneeAPI({
    pageNum: null,
    pageSize: null
  }).then(data=>{
    console.log("收货单位",data)
    getConsigneeList.value = data.data.data
  })
}
function getGoods() {
  getGoodsAPI({
    pageNum: currentPage.value,
    pageSize: pageSize.value
  }).then(data => {
    console.log("商品",data)
    getGoodsList.value = data.data.data.stockList
  })
}
function lookUnivalence() {
  lookUnivalenceAPI({
    pageNum: currentPage.value,
    pageSize: pageSize.value
  }).then(data => {
    console.log("lookUnivalence",data)
    tableData.value = data.data.data.ReceivingList
    total.value = data.data.data.total
  })
}

function handleSelectionChange(val) {
  multipleSelection.value = val
}

function handleEdit(row) {
  dialogFormData.value = JSON.parse(JSON.stringify(row))
  console.log("dialogFormData",dialogFormData.value)
  dialogFormVisibleUpdate.value = true
}

function handleDelete(row) {
  handleDeleteIndex.value = row.id
  dialogFormVisibleDelete.value = true
}

function deleteUnivalence() {
  if (multipleSelection.value.length == 0) {
    deleteUnivalenceAPI({
      ids: handleDeleteIndex.value
    }).then(data => {
      ElMessage.success(data.data.data)
      lookUnivalence()
    })
  } else {
    for (let i = 0; i < multipleSelection.value.length; i++) {
      deleteUnivalenceAPI({
        ids: multipleSelection.value[i].id
      }).then(data => {
        lookUnivalence()
        if (i == multipleSelection.value.length - 1) {
          ElMessage.success(data.data.data)
        }
      })
    }
  }
  dialogFormVisibleDelete.value = false
}

function currentChange() {//分页
  lookUnivalence()
}

function updateUnivalence() {
  dialogFormVisibleUpdate.value = false
  updateUnivalenceAPI({
    id:dialogFormData.value.id,
    uid:dialogFormData.value.uid,
    gid:dialogFormData.value.gid,
    costPrice:dialogFormData.value.costPrice,
    per:dialogFormData.value.per,
    remark:dialogFormData.value.remark
  }).then(data => {
    console.log("修改",data)
    ElMessage.success(data.data.message)
    lookUnivalence()
  })
}
function sortChange(val){
  if (val.order == "ascending" || val.order == null) {
    sort.value = 0
  } else if (val.order == "descending") {
    sort.value = 1
  }
  lookUnivalence()
}
onMounted(() => {
  lookUnivalence()
  getConsignee()
  getGoods()
})
</script>
